<template>
  <div class="item1">
    <div ><img :src="playlist.coverImgUrl" alt="" style="width: 230px;" /></div>
    <div>
      <div class="hezi1">
        <span class="ziti">{{ playlist.name }}</span>
      </div>
      <div style="margin-top:40px"><span class="bq">标签:{{playlist.tags}}</span>
    </div>
    <div>
      <img :src="playlist.creator.avatarUrl" class="imgy" alt="" />
      <span class="ccc"> {{playlist.creator.nickname}}</span>
    </div>
      <el-button type="success" style="margin-left: 5px;margin-top: 42px;" @click="drawer = true">
    简介
  </el-button>

  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <span>{{playlist.description}}</span>
  </el-drawer>
    </div>

    <div class="itemleft"></div>
  </div>
  <div class="right"></div>
</template>
<script>
import { ref } from 'vue'
import { getGedandata } from '../../request/api/item';
export default {
  setup(props) {
    console.log(props);
    const drawer = ref(false)
    //防止数据丢失，渲染缓存数据
    if((props.playlist.creator="")){
      props.playlist.creator=JSON.parse(sessionStorage.getItem().playlist).creator
      console.log(props.playlist.creator);
    }
    return {drawer}
  },
  props: ["playlist"],
};
</script>
<style lang="less" scoped>
.item1 {
  display: flex;
  flex-direction: row;
  .ziti {
    font-size: 30px;
    font-weight: 1000;

    .bq {
        margin-top: 100px;
    }
  }
}
.hezi1{
    display: flex;
    flex-direction: column;
}
.imgy{
    border-radius:50%;
    margin-top: 20px;
    width:30px;
}
</style>